<template>
  <div
    style="
      min-height: 630px;
      padding: 3px;
      background-color: rgba(255, 255, 255, 1);
    "
  >
    <Row>
      <div class="toolbar">
        <div v-if="Validation.check(Resources.VERSION_ADD)">
          <Button type="primary" icon="md-add" @click="toAdd()"
            >添加版本</Button
          >
        </div>
        <Select
          style="width: 180px; margin-right: 10px"
          placeholder="更新类型"
          size="default"
          v-model="bloc.form.upgradeType"
        >
          <Option value="APP">安卓APP</Option>
          <Option value="IOS">苹果APP</Option>
          <Option value="PAD">PAD</Option>
          <Option value="S0601">S0601</Option>
        </Select>
        <Button
          type="primary"
          icon="ios-search"
          style="margin-right: 10px"
          size="default"
          @click="bloc.load(1, bloc.paged.pageSize)"
          >查询
        </Button>
        <Button
          icon="md-refresh"
          style="margin-right: 10px"
          size="default"
          @click="bloc.reset()"
          >重置</Button
        >
      </div>
    </Row>
    <div style="margin-top: 20px">
      <Table
        border
        :loading="bloc.loading"
        :columns="columns"
        highlight-row
        :data="bloc.paged.items"
      >
        <template slot-scope="{ row }" slot="action">
          <div style="white-space: nowrap">
            <Button
              size="small"
              @click="EditItem(row)"
              type="info"
              v-if="Validation.check(Resources.VERSION_DELETE)"
              >编辑
            </Button>
            <Button
              size="small"
              @click="removeItem(row)"
              type="warning"
              v-if="Validation.check(Resources.VERSION_DELETE)"
              >删除
            </Button>
            <!-- <Button size="small" @click="modifyItem(row, 1)" type="info"
              >详情
            </Button> -->
          </div>
        </template>
        <slot name="footer" slot="footer">
          <Page
            show-elevator
            show-total
            show-sizer
            :total="bloc.paged.itemCount"
            :current="bloc.paged.pageIndex"
            :page-size="bloc.paged.pageSize"
            :page-size-opts="[15, 30, 50, 100]"
            @on-change="val => bloc.load(val, bloc.paged.pageSize)"
            @on-page-size-change="val => bloc.load(bloc.paged.pageIndex, val)"
          />
        </slot>
      </Table>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Route } from "vue-router";
import { ApkBloc } from "@/view/apk/ApkBloc";
import ChangeAccountPwd from "@/component/ChangeAccountPwd.vue";
import { formatDate } from "@/base/util/Dates";
import { Validation } from "@/base/Validation";
import { Resources } from "@/base/Resources";
const columns = [
  {
    title: "ID",
    key: "id",
    align: "left",
    width: 180,
    tooltip: true
  },
  {
    title: "版本号",
    key: "versionName",
    align: "left",
    width: 80,
    tooltip: true
  },
  {
    title: "版本编号",
    key: "versionCode",
    align: "left",
    width: 80,
    tooltip: true
  },
  {
    title: "更新类型",
    key: "upgradeType",
    align: "left",
    width: 80,
    tooltip: true
  },
  {
    title: "更改状态",
    key: "updateStatus",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: params.row.updateStatus === 1 ? "不强制更新" : "强制更新"
        }
      });
    },
    align: "left",
    width: 150,
    tooltip: true
  },
  // {
  //   title: "更改信息",
  //   key: "msg",
  //   align: "left",
  //   width: 100,
  //   tooltip: true,
  // },
  {
    title: "更改内容",
    key: "modifyContent",
    align: "left",
    tooltip: true
  },
  {
    title: "下载地址",
    align: "left",
    key: "downloadUrl",
    tooltip: true
  },
  {
    title: "app大小",
    align: "left",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText:
            (parseInt(params.row.apkSize) / 1024 / 1024).toFixed(2) + "MB"
        }
      });
    },
    width: 120,
    tooltip: true
  },
  {
    title: "创建时间",
    render: (h: any, params: any) => {
      return h("span", {
        domProps: {
          innerText: formatDate(
            new Date(params.row.created),
            "yyyy-MM-dd hh:mm:ss"
          )
        }
      });
    },
    align: "left",
    width: 180,
    tooltip: true
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slot: "action",
    width: 47 * 3,
    fixed: "right"
  }
];
@Component({ components: { ChangeAccountPwd } })
export default class extends Vue {
  beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
    next(vm => {
      vm.bloc.load(vm.bloc.paged.pageIndex, vm.bloc.paged.pageSize).catch(e => {
        vm.$Message.error("操作错误");
      });
    });
  }

  bloc: ApkBloc = new ApkBloc();
  columns = columns;
  Validation = Validation;
  Resources = Resources;
  EditItem(row) {
    this.$router.push({
      path: "/apk/add",
      query: {
        isEdit: 'isEdit',
        id:row.id,
        versionName: row.versionName,
        versionCode:row.versionCode,
        updateStatus:String(row.updateStatus),
        upgradeType:row.upgradeType,
        downloadUrl:row.downloadUrl,
        apkMd5: row.apkMd5,
        apkSize:row.apkSize,
        modifyContent:row.modifyContent,
        detailedContent: row.detailedContent
      }
    });
  }
  removeItem(row) {
    this.$Modal.confirm({
      title: "提示",
      content: "确认删除后将无法恢复！还要继续吗？",
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
        this.bloc
          .removeItem(row)
          .then(value => {
            this.bloc.load(this.bloc.paged.pageIndex, this.bloc.paged.pageSize);
          })
          .then(() => {
            this.$Message.success("删除成功");
          })
          .catch(e => {
            this.$Message.error(e.message || "删除失败");
          });
      }
    });
  }
  toAdd() {
    this.$router.push({
      path: "/apk/add",
      query: {
        isEdit: ''
      }
    });
  }
}
</script>
<style lang="less" scoped></style>
